<template>
  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
    <n-drawer-content :title="title" closable>
      <MenuForm ref="menuFormRef" :permissionList="props.permissionList" @change="menuFormChange" />

      <template #footer>
        <n-space>
          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
          <n-button @click="handleReset">重置</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import MenuForm from './MenuForm.vue';

  const emit = defineEmits(['change']);

  const menuFormRef = ref();

  const props = defineProps({
    title: {
      type: String,
      default: '添加顶级菜单',
    },
    width: {
      type: Number,
      default: 580,
    },
    permissionList: {
      type: Array,
    },
  });

  const isDrawer = ref(false);
  const subLoading = ref(false);
  const placement = ref('right');

  function openDrawer() {
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    menuFormRef.value?.formSubmit();
  }

  function handleReset() {
    menuFormRef.value?.handleReset();
  }

  function menuFormChange() {
    closeDrawer();
    emit('change');
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
